<template>
  <div class="good" @click="clickGood">
    <a data-bindkey="url" data-itemid="626134552855" class="cellex-boom-item-1v1-common-promotion-toc-wrap  bk-1-column bk-column-1 J-bk-item JBKS_1-0-1" style="">
        <div class="boom-item-bd">
            <div class="boom-item-itemWrap">
            <img class="boom-item-item img-loaded" data-bindkey="pic" data-itemid="626134552855" data-size="250x250" data-rewrite="{size:'250x250'}" v-lazy="info.white_image?info.white_image:info.pict_url" />
            </div>
            <div class="boom-item-block_4">
            <div class="boom-item-container_5">
            <div class="boom-item-container">
            <div class="boom-item-titleWrap">
                <div class="boom-item-tag-wrap">
                    <img class="tag tag-title shuang12-bd-tag" src="https://gw.alicdn.com/tfs/TB1S2hlKNTpK1RjSZFMXXbG_VXa-72-36.png" v-show="info.user_type == 1" />
                </div>
                <span class="boom-item-title" data-bindkey="itemName" data-itemid="626134552855">{{info.title}}</span>
            </div>
            </div> 
            <div class="boom-item-group-benifit1" data-bindkey="benifit1" data-itemid="626134552855">
                {{info.sub_title?info.sub_title:info.short_title}}
            </div> 
            </div>
            <div class="boom-item-container_6">
            <div class="boom-item-group_2">
            <div class="boom-item-block_3">
                <div class="boom-item-tagWrap" style="background-color:#fe4800;">
                <span class="boom-item-tag">券</span>
                </div>
                <div class="boom-item-color"></div>
            </div>
            <div class="boom-item-outer" style="border-color:#fe4800;">
                <span class="boom-item-num" style="color:#fe4800;" data-bindkey="couponAmount" data-itemid="626134552855">{{info.coupon_amount}}</span>
                <span class="boom-item-yuan" style="color:#fe4800;">元</span>
            </div> 
            </div>
            <div class="boom-item-container_4">
            <div class="boom-item-container_3">
                <span class="boom-item-get" style="color:#fe4800;">券后</span>
                <span class="boom-item-rmb" style="color:#fe4800;">&yen;</span>
                <span class="boom-item-price" style="color:#fe4800;" data-bindkey="finalPrice" data-itemid="626134552855">{{info.coupon_price}}</span>
            </div>
            <div class="boom-item-moneyWrap">
                <span class="boom-item-yuan_2">￥</span>
                <span class="boom-item-money" data-bindkey="promotionPrice" data-itemid="626134552855">{{info.zk_final_price}}</span>
            </div>
            </div>
            </div>
            </div>
        </div>
        <div class="boom-item-ft"> 
            <img class="boom-item-shanchu" src="https://img.alicdn.com/tfs/TB1fqCtukL0gK0jSZFAXXcA9pXa-60-60.png" data-size="30x30" data-rewrite="{size:'30x30'}" />
            <div class="boom-item-descWrap">
            <span class="boom-item-desc" data-bindkey="benifit3" data-itemid="626134552855">30天热销 {{info.volume}} 件</span>
            </div>
            <div class="boom-item-group_4" style="background-image:linear-gradient(-90deg, #FE4800 0%, #FE7F4C 100%);">
            <span class="boom-item-buyNow" data-bindkey="config.text0" data-itemid="626134552855">领劵购买</span>
            <img class="boom-item-jinengicon" src="https://img.alicdn.com/tfs/TB1.yarulv0gK0jSZKbXXbK2FXa-24-40.png" data-size="12x20" data-rewrite="{size:'12x20'}" />
            </div>
        </div>
    </a>
    </div>
</template>

<script>
import { MessageBox  } from 'mint-ui';
import { Toast } from 'mint-ui';
import axios from "axios";
export default {
    name: 'HelloWorld',
    props: {
        msg: String,
        info: Object
    },
    components: {
        MessageBox,Toast
    },
    methods: {
        clickGood(){
            var _this = this;
            axios.get('/taobao/tpwdCreate?item_id=' + this.info.item_id +'&text=' + this.info.title + '&url=' + this.info.coupon_share_url).then(function(res){
                console.log(res);
                let data = res.data.data;
                let message = data.model;
                MessageBox.confirm(message).then(action => {
                    _this.copyToClip(message,'复制成功,请打开淘宝领取优惠卷');
                });
            });
            console.log(this.info.item_id);
        },
        copyToClip(content, message) {
            var aux = document.createElement("input"); 
            aux.setAttribute("value", content); 
            document.body.appendChild(aux);
            aux.select();
            document.execCommand("copy"); 
            document.body.removeChild(aux);
            if (message == null) {
                Toast("复制成功");
            } else{
                Toast(message);
            }
        }
    }
}
</script>
<style>

.loading{
    font-size: .3rem;
    color: white;
    padding-top: .1rem;
    padding-bottom: .1rem;
    margin: 0;
}
a {
    text-decoration: none;
    text-underline-position: under;
    background-color: transparent;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: relative;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    border-radius: .24rem;
    background-color: #fff;
    cursor: pointer;
    width: 7.02rem;
    height: 3.82rem;
    margin: .18rem auto;
    margin-top: 0;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-bd, .cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-itemWrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-bd {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding-right: .23rem;
    padding-left: .24rem;
    width: 7.02rem;
    height: 2.52rem;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-itemWrap {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    border-radius: .06rem;
    background-color: #f9f9f9;
    width: 2.5rem;
    height: 2.5rem;
    overflow: hidden;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-item {
    width: 2.5rem;
    height: 2.5rem;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-block_4 {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    height: 2.52rem;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-container, .cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-titleWrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-direction: normal;
    width: 3.8rem;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-container {
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-titleWrap {
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    background-color: hsla(0,0%,84.7%,0);
    overflow: hidden;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-tag-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.shuang12-bd-tag {
    width: auto;
    height: .24rem;
    margin-right: .06rem;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-title {
    max-width: 3.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: .32rem;
    white-space: nowrap;
    color: #434343;
    font-size: .28rem;
    font-weight: 400;
    margin-top: .1rem;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-group-benifit1 {
    width: 3.6rem;
    height: .72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: .36rem;
    color: #666;
    font-size: .24rem;
    margin-top: .12rem;
    text-align: left;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-group_2 {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: relative;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    margin-top: .2rem;
    background-color: hsla(0,0%,100%,0);
    width: 3.8rem;
    height: .3rem;
    overflow: hidden;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-block_3, .cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-tagWrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: relative;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    height: .3rem;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-tagWrap {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    border-top-left-radius: .04rem;
    border-bottom-left-radius: .04rem;
    background-color: #fe4800;
    padding: 0 .05rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 1.2rem;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-tag {
    line-height: .3rem;
    white-space: nowrap;
    color: #fff;
    font-size: .22rem;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-outer {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-top-right-radius: .04rem;
    border-bottom-right-radius: .04rem;
    padding-right: .07rem;
    padding-left: .07rem;
    border: 1px solid #fe4800;
    border-left: none;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-group_2-placeholder, .cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-outer {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: relative;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    height: .3rem;
    overflow: hidden;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-num {
    text-align: center;
    line-height: .28rem;
    white-space: nowrap;
    color: #fe4800;
    font-size: .24rem;
    font-weight: 400;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-yuan {
    margin-left: .02rem;
    max-width: .28rem;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    line-height: .28rem;
    white-space: nowrap;
    color: #fe4800;
    font-size: .22rem;
    font-weight: 400;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-container_3, .cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-container_4 {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    height: .4rem;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-container_4 {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    margin-top: .12rem;
    background-color: hsla(0,0%,100%,0);
    width: 3.8rem;
    overflow: hidden;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-container_3 {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-container_3, .cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-container_4 {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    height: .4rem;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-get {
    margin-top: .04rem;
    line-height: .28rem;
    white-space: nowrap;
    color: #fe4800;
    font-size: .24rem;
    font-weight: 400;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-rmb {
    margin-top: .08rem;
    margin-left: .03rem;
    line-height: .28rem;
    white-space: nowrap;
    color: #fe4800;
    font-size: .24rem;
    font-weight: 400;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-price {
    margin-left: .02rem;
    line-height: .36rem;
    white-space: nowrap;
    color: #fe4800;
    font-size: .36rem;
    font-weight: 500;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-moneyWrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    margin-top: .1rem;
    margin-left: .02rem;
    width: .93rem;
    height: .28rem;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-money, .cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-yuan_2 {
    line-height: .28rem;
    white-space: nowrap;
    color: #999;
    font-size: .24rem;
    font-weight: 400;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-money {
    text-decoration: line-through;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-money, .cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-yuan_2 {
    line-height: .28rem;
    white-space: nowrap;
    color: #999;
    font-size: .24rem;
    font-weight: 400;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-block_5, .cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-group_3 {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: absolute;
    top: 0;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    width: .41rem;
    height: .49rem;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-block_5 {
    left: .24rem;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-group_3 {
    left: 0;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-block_5, .cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-group_3 {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: absolute;
    top: 0;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    width: .41rem;
    height: .49rem;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-num_2 {
    position: relative;
    line-height: .3rem;
    white-space: nowrap;
    color: #fff;
    font-size: .26rem;
    font-weight: 600;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-ft {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    margin-top: .22rem;
    height: .6rem;
    padding-left: .24rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-shanchu {
    width: .3rem;
    height: .3rem;
}
a img {
    border: 0;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-descWrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    margin-left: .12rem;
    background-color: hsla(0,0%,84.7%,0);
    height: .29rem;
    overflow: hidden;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-desc {
    lines: 1;
    margin-top: 1px;
    max-width: 4.06rem;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: .28rem;
    white-space: nowrap;
    color: #666;
    font-size: .24rem;
    font-weight: 400;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-group_4 {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-left: .18rem;
    border-top-left-radius: .3rem;
    border-bottom-left-radius: .3rem;
    background-color: #fe6325;
    background-image: -webkit-gradient(linear,right top,left top,from(#fe4800),to(#fe7f4c));
    background-image: -webkit-linear-gradient(right,#fe4800,#fe7f4c);
    background-image: linear-gradient(-90deg,#fe4800,#fe7f4c);
    width: 2.1rem;
    height: .6rem;
    overflow: hidden;
    background-image: linear-gradient(-90deg, #FE4800 0%, #FE7F4C 100%);
    
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-buyNow {
    line-height: .32rem;
    white-space: nowrap;
    color: #fff;
    font-size: .28rem;
    font-weight: 500;
}
.cellex-boom-item-1v1-common-promotion-toc-wrap .boom-item-jinengicon {
    margin-left: .06rem;
    width: .12rem;
    height: .2rem;
}
img {
    border-style: none;
    width: auto\9;
    height: auto;
    max-width: 100%;
    vertical-align: top;
    -ms-interpolation-mode: bicubic;
}
</style>